import styled, { keyframes } from 'styled-components';
const fadeIn = keyframes`
  0% {
    width: 100px;
  }
  100% {
    width: 200px;
  }
`;

export const AnimateWrapper = styled.div`
    margin: 0 auto;
    width: 960px;
    padding-top: 20px;
`;

export const AnimateInput = styled.input.attrs({
  placeholder: "search"
})`
    width:150px;
    height: 30px;
    border: none;
    background: #eee;
    padding-left: 15px;
    border-radius: 15px;
    outline:none;
    &.active{
      animation: 0.5s ${fadeIn} ease-out forwards ;     
    }
`
